<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<div class="w-full relative">
				<el-button type="primary" @click="add">{{ $t('marketing.preferential.add') }}</el-button>
				<div class="absolute top-0 right-0">
					<el-button v-prmis="'activity_lottery_takeDown'" type="danger" @click="shelves">{{ $t('marketing.preferential.remove') }}</el-button>
				</div>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" @selection-change="handleSelectionChange">

				<el-table-column type="selection" width="55" :selectable="selectable" />

				<el-table-column prop="lottery_name" :label="$t('goods.corner.activitName')" show-overflow-tooltip />

				<el-table-column prop="price" :label="$t('marketing.guess.singleWithd')" show-overflow-tooltip />

				<el-table-column prop="status" :label="$t('marketing.preferential.state')" show-overflow-tooltip>
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="info">{{$t('goods.corner.not')}}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="success">{{$t('goods.corner.use')}}</el-tag>
						<el-tag v-if="scope.row.status == 3" type="warning">{{$t('goods.corner.ended')}}</el-tag>
						<el-tag v-if="scope.row.status == 4" type="danger">{{ $t('marketing.guess.active') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="desc" :label="$t('marketing.reduction.desc')" show-overflow-tooltip />

				<el-table-column prop="time" :label="$t('date.activityTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ level.gettime(scope.row.start_time, 3) }} / {{ level.gettime(scope.row.end_time, 3) }}
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')" show-overflow-tooltip>
					<template #default="scope">
						<el-button type="info" size="small" @click="getDetails(scope.row)">{{$t('public.details')}}</el-button>
						<el-button type="warning" size="small" v-if="scope.row.status == 1"
							@click="modify(scope.row)">{{ $t('public.modify') }}</el-button>
						<!-- <el-button type="primary" size="small" v-if="scope.row.status != 1"
							@click="extract(scope.row)">{{ $t('public.view') }}</el-button> -->
						<el-button v-prmis="'activity_lottery_exportAlUsed'" type="success" size="small"
							v-if="scope.row.status != 1" @click="getexcel(scope.row.al_id)">{{ $t('public.export') }}</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.lotery" @exposeData="current" @fraction="fraction" />

		</div>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import level from "@/utils/level";
import { useRouter } from "vue-router";
import { getlotteryList, takeDownlottery, exportlotteryAlUsed } from '@/api/marketing';
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
const dialogExport = ref(false)
const router = useRouter()
let data = reactive({
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('goods.corner.activitName'), type: 'input', value: '', key: 'lottery_name' },
		{ title: $t('date.activeDate'), type: 'time', value: '', key: 'start_time' },
		{ title: $t('marketing.preferential.state'), type: 'define', select: [{ label: $t('goods.corner.not'), value: 1 }, { label:  $t('goods.corner.progress'), value: 2 }, { label:  $t('goods.corner.ended'), value: 3 }, { label: $t('marketing.guess.active'), value: 4 },], value: '', key: 'status' },
	],
	list: [], // 列表信息
	alid: [], // 选中活动
	lotery: { // 筛选数据
		lottery_name: '',
		start_time: '',
		status: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})
// 付费抽奖跳转详情
let getDetails = (row) => {
	let query = {
		id: row.al_id
	}
	router.push({ path: '/marketing/guess/details/guessDetails', query })
}
// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getlotteryList(data.lotery).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		if (e != 'start_time') {
			data.lotery[key] = e[key]
		}
	}
	data.lotery.start_time = ''
	if (e.start_time != '') {
		data.lotery.start_time = e.start_time[0] + '~' + e.start_time[1]
	}
	data.lotery.page = 1
	data.lotery.pageNum = 15
	getlist()
}

// 选中的活动
let handleSelectionChange = (e) => {
	data.alid = []
	for (let item of e) {
		data.alid.push(item.al_id)
	}
}

// 是否允许被选中
let selectable = (e) => {
	let status = true
	if (e.status == 4 || e.status == 3) {
		status = false
	}
	return status
}

// 添加付费抽奖
let add = () => {
	router.push({ path: '/marketing/guess/add_info' })
}

// 修改活动
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/marketing/guess/details_info', query: query })
}

// 查看抽奖活动
let extract = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/marketing/guess/apply_info', query: query })
}

// 下架活动
let shelves = () => {
	if (data.alid.length == 0) {
		ElMessage({
			 message:  $t('message.pleaseDownActivity'),
			type: 'error'
		})
		return
	}
	let obj = {
		al_id: data.alid.join(',')
	}

	ElMessageBox.confirm($t('message.isDown'))
		.then(res => {
			takeDownlottery(obj).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.downSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 导出Excel
let getexcel = (e) => {
	let obj = {
		al_id: e
	}

	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportlotteryAlUsed(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}

			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})
}

// 页数回调
let current = (e) => {
	data.lotery.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.lotery.pageNum = e
	getlist()
}

getlist()

</script>
